{% extends "base.html" %}
{% block title %}DashBoard{% endblock %}
{% block styles %}
    {{ super() }}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="/static/css/jquery-ui.min.css">
    <link rel="stylesheet" href="/static/css/lobipanel.min.css">
    <style>
        .bootstrap-select .dropdown-toggle {
            width: 85%;
        }
    </style>
{% endblock %}
{% block page_content %}
    <div class="alert" role="alert" id="msgAlert">

    </div>
    <div class="well row">
        <div class="row">
            <div class="col-md-6">
                <label for="chartType" class="inline">Dashboard:</label>
                <select class="selectpicker" name="dashboard" id="dashboard" data-live-search="true">
                </select>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addDashboard">
                    Add
                </button>
                <button type="button" id="dashboardDelBtn" class="btn btn-primary">Del</button>
            </div>
            <div class="col-md-6">
                <label for="chartType">Select Charts:</label>
                <select class="selectpicker" name="charts" id="charts" data-live-search="true" multiple>
                </select>
                <button type="button" id="chartsAddBtn" class="btn btn-primary">Add Charts</button>
                <button type="button" id="chartsSaveBtn" class="btn btn-primary">Save</button>
                <button type="button" id="chartsShareBtn" class="btn btn-primary">Share</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="dashboardCanvas" style="margin-top:65px;">
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addDashboard" tabindex="-1" role="dialog" aria-labelledby="addDashboardLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="addDashboardLabel">Add Dashboard</h4>
                </div>
                <div class="modal-body">
                    <form action="" id="addDashboardFrom">
                        <div class="input-group" style="width:100%">
                            <label for="catalog">Name:</label>
                            <input type="text" name="dashboardName" class="form-control" id="catalog">
                        </div>
                        <div class="input-group" style="width:100%">
                            <label for="connecter">Desc:</label>
                            <input type="text" name="dashboardDesc" class="form-control" id="connecter">
                        </div>
                        <div class="input-group">
                            <label for="connecter">Is Public:</label>
                            <input type="checkbox" name="isPublic" style='margin:10px' id="public">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="dashboardAddBtn" class="btn btn-primary">添加</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
    <script src="/static/js/jquery-ui.min.js"></script>
    <script src="/static/js/lobipanel.min.js"></script>
    <script>
        $(function () {

            var dashboardlist = {{ dashboards|tojson }};
            var chartinfolist = {{ chart_infos|tojson }};
            var dashboard_options = [];
            $.each(dashboardlist, function (index, obj) {
                var option = "<option value='" + obj.id + "'>" + obj.name + "</option>";
                dashboard_options.push(option);
            });
            $('#dashboard').html(dashboard_options);
            $('#dashboard').selectpicker('refresh');
            $('#dashboard').selectpicker('render');
            var chartinfo_options = [];
            $.each(chartinfolist, function (index, obj) {
                var optiongroup = "<optgroup label='" + obj.tag + "'>";
                $.each(obj.nodes, function (index, item) {
                    optiongroup += "<option value='" + item.id + "'>" + item.text + "</option>";
                });
                chartinfo_options.push(optiongroup);
            });
            $('#charts').html(chartinfo_options);
            $('#charts').selectpicker('refresh');
            $('#charts').selectpicker('render');

            function refreshDashboard(id) {
                $("#dashboardCanvas").empty();
                $.ajax({
                    type: "get",
                    url: "/query/dashboard/" + id,
                    success: function (data) {
                        $.each(data.data.charts, function (index, obj) {
                            $("#dashboardCanvas").append('<div class="panel panel-default" chart-id="' + obj.id + '" style="width:' + obj.width + 'px;height:' + obj.height + 'px;float:left;margin:5px;"><div class="panel-heading"> </div><div class="panel-body">Loading...</div></div>');
                            $(".panel-heading").hide();
                            var chart;

                            $('.panel').on('init.lobiPanel', function (ev, lobiPanel) {
                                var panel = $(this);
                                $.ajax({
                                    type: "get",
                                    url: '/query/chart/' + obj.id,
                                    success: function (data) {
                                        panel.children().eq(1).empty();
                                        var canvas = "<div  style='margin-top:20px;width:100%;background-color: white;min-height: 200px;height:100%'></div>";
                                        panel.children().eq(1).html(canvas);
                                        chart = echarts.init(panel.children().eq(1).children().eq(0)[0], null, {renderer: 'canvas'});
                                        var chart_options = $.parseJSON(data.options);
                                        chart.setOption(chart_options);
                                    }
                                });
                            });
                            $('.panel').lobiPanel({
                                reload: false,
                                editTitle: false,
                                sortable: true,
                                width: 300,
                                height: 300
                            });
                            $(".panel").mouseover(function (event) {
                                $(this).find("div").first().show();
                            });
                            $(".panel").mouseout(function (event) {
                                $(this).find("div").first().hide();
                            });
                            $('.lobipanel').on('beforePin.lobiPanel', function (ev, lobiPanel) {
                                panelWidth = lobiPanel.getWidth();
                                panelHeight = lobiPanel.getHeight();
                            });
                            $('.lobipanel').on('onPin.lobiPanel', function (ev, lobiPanel) {
                                $(this).width(panelWidth);
                                $(this).height(panelHeight);
                                $(this).css("float", "left");
                                $(this).css("margin", "5px");
                            });
                            $('.lobipanel').on('onSmallSize.lobiPanel', function (ev, lobiPanel) {
                                chart.resize();
                            });
                            $('.lobipanel').on('onFullScreen.lobiPanel', function (ev, lobiPanel) {
                                chart.resize();
                            });
                            $('.lobipanel').on('onResize.lobiPanel', function (ev, lobiPanel) {
                                chart.resize();
                            });
                        });
                    }
                });
            }

            var id = $('#dashboard option:selected').val();
            refreshDashboard(id);
            $('#dashboard').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
                var name = $('#dashboard option:selected').val();
                refreshDashboard(name);
            });
            $("#dashboardAddBtn").click(function () {
                $.ajax({
                    type: "post",
                    url: "/query/dashboard",
                    data: $("#addDashboardFrom").serialize(),
                    success: function (data) {
                        $("#addDashboard").modal('hide');
                        var dashboard = "<option value='" + data.data + "'>" + data.data + "</option>";
                        $('#dashboard').append(dashboard);
                        $('#dashboard').selectpicker('refresh');
                        $('#dashboard').selectpicker('render');
                        $("#msgAlert").removeClass('alert-danger').addClass('alert-success');
                        var innerHTML = "<strong>Add DashBoard Success!</strong>";
                        $("#msgAlert")[0].innerHTML = innerHTML;
                        $("#msgAlert").fadeTo(2000, 500).slideUp(500, function () {
                            $("#msgAlert").hide();
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $("#msgAlert").removeClass('alert-success').addClass('alert-danger');
                        var innerHTML = "<strong>Add DashBoard  Failed!</strong>";
                        $("#msgAlert")[0].innerHTML = innerHTML;
                        $("#msgAlert").fadeTo(2000, 500).slideUp(500, function () {
                            $("#msgAlert").hide();
                        });
                    }
                });
            });
            $("#dashboardDelBtn").click(function () {
                var id = $('#dashboard option:selected').val();
                $.ajax({
                    type: "delete",
                    url: "/query/dashboard/" + id,
                    success: function (data) {
                        $('#dashboard option:selected').remove();
                        $('#dashboard').selectpicker('refresh');
                        $('#dashboard').selectpicker('render');
                        $("#msgAlert").removeClass('alert-danger').addClass('alert-success');
                        var innerHTML = "<strong>Del DashBoard Success!</strong>";
                        $("#msgAlert")[0].innerHTML = innerHTML;
                        $("#msgAlert").fadeTo(2000, 500).slideUp(500, function () {
                            $("#msgAlert").hide();
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $("#msgAlert").removeClass('alert-success').addClass('alert-danger');
                        var innerHTML = "<strong>Del Catalog  Failed!</strong>";
                        $("#msgAlert")[0].innerHTML = innerHTML;
                        $("#msgAlert").fadeTo(2000, 500).slideUp(500, function () {
                            $("#msgAlert").hide();
                        });
                    }
                });
            });

            var panelWidth = 300;
            var panelHeight = 300;
            $("#chartsAddBtn").click(function () {
                var selected_charts = $('#charts').val();
                $.each(selected_charts, function (index, obj) {
                    $("#dashboardCanvas").append('<div class="panel panel-default" chart-id="' + obj + '" style="width:300px;height:300px;float:left;margin:5px;"><div class="panel-heading"> </div><div class="panel-body">Loading...</div></div>');
                    $(".panel-heading").hide();
                    var chart;

                    $('.panel').on('init.lobiPanel', function (ev, lobiPanel) {
                        var panel = $(this);
                        console.log("init panel")
                        $.ajax({
                            type: "get",
                            url: '/query/chart/' + obj,
                            success: function (data) {
                                panel.children().eq(1).empty();
                                var canvas = "<div  style='margin-top:20px;width:100%;background-color: white;min-height: 200px;height:100%'></div>";
                                panel.children().eq(1).html(canvas);
                                chart = echarts.init(panel.children().eq(1).children().eq(0)[0], null, {renderer: 'canvas'});
                                var chart_options = $.parseJSON(data.options);
                                chart.setOption(chart_options);
                            }
                        });
                    });
                    $('.panel').lobiPanel({
                        reload: false,
                        editTitle: false,
                        sortable: true,
                        width: 300,
                        height: 300
                    });
                    $(".panel").mouseover(function (event) {
                        $(this).find("div").first().show();
                    });
                    $(".panel").mouseout(function (event) {
                        $(this).find("div").first().hide();
                    });
                    $('.lobipanel').on('beforePin.lobiPanel', function (ev, lobiPanel) {
                        panelWidth = lobiPanel.getWidth();
                        panelHeight = lobiPanel.getHeight();
                    });
                    $('.lobipanel').on('onPin.lobiPanel', function (ev, lobiPanel) {
                        $(this).width(panelWidth);
                        $(this).height(panelHeight);
                        $(this).css("float", "left");
                        $(this).css("margin", "5px");
                    });
                    $('.lobipanel').on('onSmallSize.lobiPanel', function (ev, lobiPanel) {
                        chart.resize();
                    });
                    $('.lobipanel').on('onFullScreen.lobiPanel', function (ev, lobiPanel) {
                        chart.resize();
                    });
                    $('.lobipanel').on('onResize.lobiPanel', function (ev, lobiPanel) {
                        chart.resize();
                    });
                });
                $('#charts').selectpicker('deselectAll');

                $('#charts').selectpicker('refresh');
            });

            $("#chartsSaveBtn").click(function () {
                var selected_dashboard = $('#dashboard').val();
                var charts_data = [];
                $(".panel").each(function (index, element) {
                    var info = {
                        'chart_id': $(this).attr("chart-id"),
                        'width': $(this).width(),
                        'height': $(this).height(),
                        'sort': index
                    };
                    console.log(info)
                    charts_data.push(info);

                });
                console.log(charts_data)
                $.ajax({
                    type: "post",
                    url: "/query/dashboard/" + selected_dashboard,
                    data: {'charts': JSON.stringify(charts_data)},
                    success: function (data) {
                        $("#msgAlert").removeClass('alert-danger').addClass('alert-success');
                        var innerHTML = "<strong>Add DashBoard Success!</strong>";
                        $("#msgAlert")[0].innerHTML = innerHTML;
                        $("#msgAlert").fadeTo(2000, 500).slideUp(500, function () {
                            $("#msgAlert").hide();
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $("#msgAlert").removeClass('alert-success').addClass('alert-danger');
                        var innerHTML = "<strong>Add DashBoard  Failed!</strong>";
                        $("#msgAlert")[0].innerHTML = innerHTML;
                        $("#msgAlert").fadeTo(2000, 500).slideUp(500, function () {
                            $("#msgAlert").hide();
                        });
                    }
                });
            });

            $("#chartsShareBtn").click(function () {
                var id = $('#dashboard option:selected').val();
                window.location.href = '/share/dashboard/' + id;
            });
        })


    </script>
    <script src="https://pyecharts.github.io/assets/js/echarts.min.js"></script>
    <script src="https://pyecharts.github.io/assets/js/china.js"></script>
    <script src="https://pyecharts.github.io/assets/js/echarts-liquidfill.min.js"></script>
    <script src="https://pyecharts.github.io/assets/js/echarts-wordcloud.min.js"></script>
{% endblock %}